<template>
  <view class="address-book-details">
    <NavBar
      v-if="appInfoStore().isH5"
      title="通讯录"
    />
    <view
      class="details-box"
      :class="{ 'padding-top-navbar': appInfoStore().isH5 }"
    >
      <view class="address-book-details-title">
        <nut-searchbar
          v-model="searchValue"
          placeholder="搜索"
        >
          <template v-slot:leftin>
            <i
              class="iconfont icon-sousuo"
              style="font-size: 20px; color: #666"
            ></i>
          </template>
        </nut-searchbar>
      </view>
      <view class="details-content">
        <view class="details-content-item">
          <view class="item-title">
            <text>可选范围：通讯录</text>
            <i class="iconfont icon-youjiantou1"></i>
            <view
              class="select-title-text"
              @click="handleToDeptList"
              >组织</view
            >
            <text
              class="select-title-text"
              v-if="isUserList"
            >
              <i class="iconfont icon-youjiantou1"></i>{{ selectDeptName }}</text
            >
          </view>
          <view class="item-content">
            <nut-cell class="select-all">
              <nut-checkbox
                v-model="isSelectedAll"
                :indeterminate="indeterminate"
                @change="change1"
              >
                全选
              </nut-checkbox>
            </nut-cell>
            <!-- 部门 -->
            <view
              class="select-item"
              v-if="!isUserList"
            >
              <nut-checkbox-group
                ref="group"
                v-model="selectDeptIds"
                @change="change2"
              >
                <nut-cell
                  class="checkbox-item"
                  v-for="(item, index) in userList"
                  :key="index"
                >
                  <view class="checkbox-item-box">
                    <nut-checkbox :label="item.deptId">
                      <view class="checkbox-item-box-left">
                        <view class="left-img">
                          <img
                            src="https://img.alicdn.com/imgextra/i4/1034622205/O1CN01b4SLYh1S9wNw53GJw_!!1034622205.png"
                            alt=""
                          />
                          <text>{{ item.deptName }}</text>
                        </view>
                      </view>
                    </nut-checkbox>
                  </view>
                  <view
                    class="checkbox-item-box-right"
                    @click="handleToUserList(item)"
                  >
                    <i class="iconfont icon-youjiantou1"></i>
                  </view>
                </nut-cell>
              </nut-checkbox-group>
            </view>
            <!-- 人员 -->
            <view
              class="select-item"
              v-if="isUserList"
            >
              <nut-checkbox-group
                ref="group"
                v-model="selectUserIds"
                @change="change2"
              >
                <nut-cell
                  class="checkbox-item"
                  v-for="(item, index) in selectUserList"
                  :key="index"
                >
                  <view class="checkbox-item-box">
                    <nut-checkbox :label="item.userId">
                      <view class="checkbox-item-box-left">
                        <view class="left-img">
                          <img
                            src="https://img.alicdn.com/imgextra/i4/1034622205/O1CN01b4SLYh1S9wNw53GJw_!!1034622205.png"
                            alt=""
                          />
                          <text>{{ item.nickName }}</text>
                        </view>
                      </view>
                    </nut-checkbox>
                  </view>
                  <!-- <view
                    class="checkbox-item-box-right"
                    @click="handleToUserList(item)"
                  >
                    <i class="iconfont icon-youjiantou1"></i>
                  </view> -->
                </nut-cell>
              </nut-checkbox-group>
            </view>
            <view class="item-content-btn">
              <!-- 部门 -->
              <view
                class="btn-box"
                v-if="!isUserList"
              >
                <view class="btn-box-left">
                  <text>已选择：{{ selectDeptIds.length }}个部门</text>
                  <text>({{ usersAllNum }}人)</text>
                </view>
                <view
                  class="btn-box-right"
                  @click="submitDept"
                >
                  <nut-button type="primary">确定({{ selectDeptIds.length }})</nut-button>
                </view>
              </view>
              <!-- 人员 -->
              <view
                class="btn-box"
                v-if="isUserList"
              >
                <view class="btn-box-left">
                  <text>已选择：{{ selectDeptName }}</text>
                  <text>({{ selectUserIds.length }}人)</text>
                </view>
                <view
                  class="btn-box-right"
                  @click="submitUser"
                >
                  <nut-button type="primary">确定</nut-button>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import NavBar from "@/components/navBar/index.vue";
import { appInfoStore } from "@/stores/appInfo";
import addOrganization from "./addOrganization/index.vue";
import addGroupChat from "./addGroupChat/index.vue";
import selectPerson from "@/components/selectPerson/index.vue";
import { getUserList } from "@/api/index";
import { userInfoStore } from "@/stores/userInfoStore";
const store = userInfoStore();
import { useRouter, useDidShow } from "@tarojs/taro";
import { onMounted, reactive, ref } from "vue";
import Taro from "@tarojs/taro";
const rouer = useRouter();
const group = ref(null);
const userList = ref([]);
const selectUserList = ref([]); // 选择部门的人员
const isSelectedAll = ref(false);
const usersAllNum = ref(0);
const selectDeptIds = ref([]);
const selectUserIds = ref([]);
const indeterminate = ref(false);
const isUserList = ref(false);
const selectDeptName = ref(""); //选中的部门名称
const props = defineProps(["detailsId"]);
const detailsId = ref<string | undefined>("");
const selectType = ref(); //是哪个页面传的什么类型进行值区分
onMounted(() => {
  let newSelectDeptIds = rouer.params.ids ? rouer.params.ids?.split(",").map(Number) : [];
  selectDeptIds.value = JSON.parse(JSON.stringify(newSelectDeptIds));
  let newSelectUserIds = rouer.params.userIds ? rouer.params.userIds?.split(",").map(Number) : [];
  selectUserIds.value = JSON.parse(JSON.stringify(newSelectUserIds));
  selectType.value = rouer.params.type ? rouer.params.type : "";

  handleUserList();
});
useDidShow(() => {
  // selectDeptIds.value = [];
  handleUserList();
});
// 查询人员
const handleToUserList = res => {
  userList.value.forEach(item => {
    if (item.deptId == res.deptId) {
      isUserList.value = true;
      selectUserList.value = item.users;
      selectDeptName.value = item.deptName;
    }
  });
};
// 回到组织列表
const handleToDeptList = () => {
  isUserList.value = false;
};
const change1 = value => {
  group.value.toggleAll(value);
};
const handleUserList = () => {
  let params = {
    //   name: searchValue.value,
    // token: Taro.getStorageSync("token"),
  };
  getUserList(params).then(res => {
    userList.value = res.data;
  });
};
const change2 = label => {
  usersAllNum.value = 0;
  if (label.length === userList.value.length) {
    indeterminate.value = false;
    isSelectedAll.value = true;
  } else if (label.length && label.length < userList.value.length) {
    indeterminate.value = true;
  } else {
    indeterminate.value = false;
    isSelectedAll.value = false;
  }
  if (selectDeptIds.value.length > 0) {
    userList.value.forEach(item => {
      selectDeptIds.value.forEach(item2 => {
        if (item.deptId == item2) {
          usersAllNum.value += item.users.length;
        }
      });
    });
  } else {
    usersAllNum.value = 0;
  }
};
// 部门选择
const submitDept = () => {
  let selectDeptList = [];
  userList.value.forEach(item => {
    selectDeptIds.value.forEach(item2 => {
      if (item.deptId == item2) {
        selectDeptList.push({
          deptId: item.deptId,
          deptName: item.deptName,
          users: item.users,
        });
      }
    });
  });
  store.selectDeptIds = selectDeptList;
  store.selectType = selectType.value;
  let useList = [];
  selectDeptList.forEach(item => {
    useList.push(...item.users);
  });
  console.log(useList, "selectUserIds333");
  store.selectUserIds = useList;

  Taro.navigateBack();
  store.updateAttendanceSelection();

};
// 人员选择
const submitUser = () => {
  let useList = [];
  selectUserList.value.forEach(item => {
    selectUserIds.value.forEach(item2 => {
      if (item.userId == item2) {
        useList.push({
          userId: item.userId,
          nickName: item.nickName,
          avatarUrls: item.avatarUrls,
        });
      }
    });
  });
  store.selectUserIds = useList;
  Taro.navigateBack();
  store.updateAttendanceSelection();

};
</script>
<style lang="less">
@import "./index.less";
// @import url("../../assets/css/index.css");
@import "@/assets/css/index.less";
</style>
